import {
  CloseOutlined,
  RedoOutlined,
  UndoOutlined,
  ZoomInOutlined,
  ZoomOutOutlined,
} from '@ant-design/icons';
import { Spin } from 'antd';
import React, { useEffect, useState } from 'react';
import FreeTransform from 'react-free-transform';
import './index.less';

/**
 * @author king
 * @param props
 */
export const ImgView = (props: any) => {
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);
  const [scaleX, setScaleX] = useState(1);
  const [scaleY, setScaleY] = useState(1);
  const [angle, setAngle] = useState(0);
  const [loading, setLoading] = useState(true);
  const [size, setSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (loading) {
      const { previewImgUrl } = props;
      getImageDimensions(previewImgUrl);
    }
  }, []);

  const getImageDimensions = (imgUrl: any) => {
    // 创建对象
    var img: any = new Image();
    // 改变图片的src
    img.src = imgUrl;

    img.onload = function () {
      console.log(img.width + ' ' + img.height);
      img.οnlοad = null; //避免重复加载
      const width = window.outerWidth;
      const height = window.outerHeight;
      setLoading(false);
      let imgWidth = img.width;
      let imgHeight = img.height;
      const cut = imgWidth > width / 2;
      if (cut) {
        const oldWidth = imgWidth;
        imgWidth = width / 3;
        imgHeight = (imgHeight * imgWidth) / oldWidth;
      }
      setSize({
        width: imgWidth,
        height: imgHeight,
      });
      setX((width - imgWidth) / 2);
      setY((height - imgHeight) / 4);

      // 竖向图片默认旋转90
      if (imgHeight > imgWidth) {
        setAngle(90);
      }
    };
  };
  const { previewImgUrl } = props;

  return (
    <div className="ant-modal-mask">
      {size && size.width && (
        <FreeTransform
          x={x}
          y={y}
          width={size.width}
          height={size.height}
          scaleX={scaleX}
          scaleY={scaleY}
          angle={angle}
          onUpdate={(payload: any) => {
            setX(payload.x || x);
            setY(payload.y || y);
            setScaleX(payload.scaleX || scaleX);
            setScaleY(payload.scaleY || scaleY);
          }}
          classPrefix="tr"
          disableScale={false}
        >
          <img src={previewImgUrl} width={size.width} height={size.height} />
        </FreeTransform>
      )}
      <Spin
        spinning={loading}
        size="large"
        style={{ position: 'fixed', right: '50%', top: 100 }}
        tip="图片加载中..."
      ></Spin>
      <CloseOutlined
        style={{ position: 'fixed', right: 20, top: 20, fontSize: 40, color: 'white' }}
        onClick={props.handleCancel}
      />
      <div
        style={{
          width: '100%',
          textAlign: 'center',
          padding: 10,
          position: 'fixed',
          bottom: 50,
          zIndex: 999999999,
        }}
      >
        <UndoOutlined
          style={{ fontSize: 40, color: 'white' }}
          onClick={() => {
            setAngle(angle - 90);
          }}
        />
        <RedoOutlined
          style={{ fontSize: 40, color: 'white', marginLeft: 20 }}
          onClick={() => {
            setAngle(angle + 90);
          }}
        />
        <ZoomInOutlined
          style={{ fontSize: 40, color: 'white', marginLeft: 20 }}
          onClick={() => {
            setScaleX(scaleX + 0.1);
            setScaleY(scaleY + 0.1);
          }}
        />
        <ZoomOutOutlined
          style={{ fontSize: 40, color: 'white', marginLeft: 20 }}
          onClick={() => {
            setScaleX(scaleX - 0.1);
            setScaleY(scaleY - 0.1);
          }}
        />
      </div>
    </div>
  );
};
